<script lang="ts" setup>
defineSlots<{
  default: (props: unknown) => unknown
  title: (props: unknown) => unknown
  nav: (props: unknown) => unknown
  nav2: (props: unknown) => unknown
  asideL?: (props: unknown) => unknown
  asideR?: (props: unknown) => unknown
  footer: (props: unknown) => unknown
}>();
</script>

<template>
  <!-- 最外一层,减少第一次的水和错误 -->
  <div class="h-screen">
    <div class="w-screen shadow-sm h-[72px] dark:bg-slate-800">
      <Gprogress />
      <!-- <div class="h-1"></div> -->
      <header
        class="w-full flex justify-center items-center align-bottom h-[64px] shadow-2xl"
      >
        <!-- TODO: use google font -->
        <div
          class="flex text-3xl ml-[16vw] mr-[6vw] sm:ml-[12vw] sm:mr-[2vw] cursor-pointer items-baseline"
          @click="
            () => {
              navigateTo('/');
            }
          "
        >
          <slot name="title" />
        </div>
        <!-- nav -->
        <nav class="flex text-lg justify-between">
          <slot name="nav" />
        </nav>
        <!-- search -->
        <div class="flex flex-grow ml-[2vw] justify-center">
          <Gsearch class="w-full" />
        </div>
        <!-- nav2 -->
        <nav
          class="flex m-4 flex-grow justify-start items-center overflow-visible *:m-2"
        >
          <slot name="nav2" />
        </nav>
      </header>
    </div>

    <div
      class="top-[72px] bottom-0 flex fixed bg-cool-100 dark:bg-slate-700 w-screen overflow-x-auto justify-center"
    >
      <aside class="xl:mr-2 pl-8 lap:ml-auto lg:mx-0 sticky top-0">
        <!-- 这里只能用 !important 注入子元素 -->
        <UCard class="w-[200px] mt-5 *:!p-2">
          <slot name="asideL" />
        </UCard>
      </aside>
      <main class="body w-full mx-[16px]">
        <UCard
          class="mt-5 mx-0 mb-2"
          :ui="{
            background: 'bg-white dark:bg-slate-500',
          }"
        >
          <slot name="default" />
        </UCard>

        <footer class="flex h-[64px] bottom-0">
          <UCard
            class="my-2 w-full absolute left-0 rounded-none dark:bg-slate-800"
          >
            <slot name="footer" />
          </UCard>
        </footer>
      </main>
      <aside class="xl:ml-2 pr-8 lap:mr-auto lg:mx-0 sticky top-0">
        <UCard class="w-[200px] mt-5 *:!p-2 invisible">
          <slot name="asideR" />
        </UCard>
      </aside>
    </div>
    <!-- 因为排版太难了所以放到main最下了 -->
    <!-- <footer class="flex h-[64px] bottom-0 -pt-[64px]">
      <UCard class="m-2"><slot name="footer" /></UCard>
    </footer> -->
  </div>
</template>

<style scoped lang="postcss">
.container {
  @apply w-full min-w-[1080px] px-4 mx-auto;
}

.body {
  @apply min-w-[640px] max-w-[1280px] bg-cool-100 dark:bg-slate-700 flex flex-col flex-nowrap;
}

.black-card {
  @apply bg-slate-800 text-white;
}
</style>
